<template>
	<view class="m-card-input-view">
		<view class="m-card-input-title">
			<span v-if="symbol" :style="{ color: symbolColor }">{{ symbol }}</span>
			<span :style="{ color: titleColor }">{{ title }}</span><span v-if="colon">:</span><span v-if="asterisk"
				style="color: red;">*</span>
		</view>
		<view class="m-card-input-content">
			<template>
				<view style="display: flex;" :style="{ justifyContent: justifyContent }" v-if="type == 'text'">
					<view class=""> {{ value }} </view>
					<view class="m-card-input-right" v-if="rifhtIcon">
						<eui-uicons v-if="scan == 'scan' || scan == 'right'" @click="onClickScan" class="m-card-arrow"
							type="scan" size="20" style="color: #13C2E1 !important;"></eui-uicons>
						<eui-uicons v-if="scan != 'scan'" @click="onClick" class="m-card-arrow m-card-arrowright"
							type="arrowright" size="20"></eui-uicons>
					</view>
					<view class="m-card-input-right m-card-input-text" @click="onClick" v-if="rightText">
						{{ rightText }}
					</view>
				</view>
				<view v-else-if="type == 'date'">
					<view style="height: 40rpx;">
						<picker style="margin: 5rpx 0;height: 40rpx;" :disabled="displayable" mode="date"
							@change="onDateChange" :value="value" :start="dateStart">
							<view class="m-input-date" v-if="show">
								<input :focus="focus || c_focus" :click="click || c_click" :type="type"
									:value="formatDate(value)" :format="format" @input="onInput"
									class="m-input-input m-input-input-date" :placeholder="placeholder" ref='input'
									@focus="onFocus" @click="onClick" @blur="onBlur" @confirm="onConfirm" :disabled="true"
									v-if="!$slots.inputItem" :fieldName="fieldName" :itemIndex="itemIndex" />
								<!-- <icon class="icon enjoyIcon icon-you" style="color: #aaa;"></icon> -->
								<view v-if="rifhtIcon">
									<eui-uicons v-if="!displayable" @click="onClick" class="m-card-arrow m-card-arrowright"
										:type="rifhtIcon!=true?rifhtIcon:'arrowright'" size="20"></eui-uicons>
								</view>
							</view>
						</picker>
					</view>
				</view>
				<view v-else-if="type == 'selector'">
					<view style="height: 40rpx;">
						<picker style="margin: 5rpx 0;height: 40rpx;" :disabled="displayable" mode="selector"
							@change="onSelectorChange" range-key="text" :range="range">
							<view class="m-input-date">
								<text class="m-input-input m-input-input-left">{{ keyWithValue }}</text>
								<input ref='input' :focus="focus || c_focus" :type="type" :value="value"
									:placeholder="placeholder" :disabled="true" @input="onInput" @focus="onFocus"
									@click="onClick" @blur="onBlur" @confirm="onConfirm" v-if="!$slots.inputItem"
									class="m-input-input m-input-input-left"
									:style="{ color: 'transparent', display: 'none' }" />
								<eui-uicons v-if="!displayable" @click="onClick" class="m-card-arrow m-card-arrowright"
									:type="rifhtIcon!=true?rifhtIcon:'arrowright'" size="20"></eui-uicons>
							</view>
						</picker>
					</view>
				</view>
				<view class="rds-multiselect" v-else-if="type == 'multiSelector'">
					<checkbox-group :disabled="displayable" @change="checkboxChange">
						<label v-for="item in range" :key="item.value">
							<checkbox :disabled="displayable" style="transform:scale(0.6)" :value="item.value" :checked="item.checked" />
							<text class="text">{{ item.text }}</text>
						</label>
					</checkbox-group>
				</view>
				<view class="rds-multiselect" v-else-if="type == 'radioSelector'">
					<radio-group :disabled="displayable" @change="radioChange">
						<label v-for="item in range" :key="item.value">
							<radio :disabled="displayable" style="transform:scale(0.6)" :value="item.value"
								:checked="item.checked || item.value == value" />
							<text class="text">{{ item.text }}</text>
						</label>
					</radio-group>
				</view>
				<view style="display: flex;" v-else>
					<input :focus="focus || c_focus" :type="type" :value="value" @input="onInput" class="m-input-input"
						:style="{ textAlign: textAlign }" :placeholder="placeholder" ref='input' @focus.stop="onFocus"
						@blur.stop.prevent="onBlur" @confirm.stop.prevent="onConfirm" :disabled="displayable"
						:class="{ 'displayable': displayable, 'isFocus': isFocus }" :maxlength="maxlength"
						v-if="!$slots.inputItem" :fieldName="fieldName" :itemIndex="itemIndex" />
					<view class="m-card-input-right" v-if="rifhtIcon">
						<eui-uicons v-if="scan == 'clear' && isFocus" @click="onClickScan" class="m-card-arrow"
							type="closeempty" size="20" style="color: #13C2E1 !important;"></eui-uicons>
						<eui-uicons v-if="scan == 'scan' || scan == 'right'" @click="onClickScan" class="m-card-arrow "
							:class="scan == 'scan' ? 'mr-5' : ''" type="scan" size="20"
							style="color: #13C2E1 !important;"></eui-uicons>
						<eui-uicons v-if="scan != 'scan'" @click="onClick" class="m-card-arrow m-card-arrowright"
							type="arrowright" size="20"></eui-uicons>
					</view>
					<view class="m-card-input-right m-card-input-text" @click="onClick" v-if="rightText">
						{{ rightText }}
					</view>
				</view>
				<!-- 可扩展的插槽 -->
				<slot name="inputItem">
				</slot>
				<!-- 可扩展的插槽 -->
			</template>
		</view>
	</view>
</template>
<script>
/**
 *  m-card-input: 这是卡片
 *  @property {String} type  text number 是文本
 * 	@property {String} titleColor 文本的颜色
 *  @property {String} dateStart 当type=data时,日期范围的开始，字符串格式为"YYYY-MM-DD"
 *  @property {String} value =  {...}  这个是选择对象
 *	@property {String} placeholder = 没有值的提示值 
 *	@property {String} justify-content = flex-start 对其方式
 *	@property {String} text-align = left 文字对其方式
 *	@property {String} symbol 标题前面的符号
 *	@property {String} symbolColor 标题前面的符号颜色
 *	@property [Boolean, String] displayable = 禁用
 *	@property [Boolean, String] focus =  
 *	@property [Boolean, String] rifhtIcon 右侧icon
 *	@property [Boolean, String] asterisk 红色*
 * 	@property [Boolean, String] colon 是否显示冒号
 *	@property [Boolean, String] isBlur 控制焦点离开
 * 	@event {Function} click  confirm 回车事件
 * 	@event {Function} click  clickRight 右边事件
 * 	@event {Function} click  buttonClick 这个是 button 值的传递
 *  @property {String Number} maxlength 输入最大长度
 */
import dayjs from 'dayjs';
// import { getRelatedName } from '../components/RelatedName.js';

export default {
	name: "mCardInput",
	components: {
	},
	props: {
		/**
		 * 输入类型
		 */
		type: String,
		/**
		 * 值
		 */
		value: {
			type: [Number, String, Object]
		},
		titleColor: {
			type: String,
			default: '#999'
		},
		/**
		 * 标题
		 */
		title: String,
		name: String,
		/**
		 * 占位符
		 */
		placeholder: String,
		symbol: String,
		symbolColor: String,
		/**
		 * 是否显示清除按钮
		 */
		clearable: {
			type: [Boolean, String],
			default: false
		},
		/**
		 * 是否显示禁用
		 */
		displayable: {
			type: [Boolean, String],
			default: false
		},
		/**
		 * 自动获取焦点
		 */
		focus: {
			type: [Boolean, String],
			default: false
		},
		click: {
			type: [Boolean, String],
			default: false
		},
		rifhtIcon: {
			type: [Boolean, String],
			default: false
		},
		rightText: {
			type: [String, Number],
			default: ''
		},
		scan: {
			type: [String, Boolean],
			default: ''
		},
		asterisk: {
			type: Boolean,
			default: false
		},
		range: {
			type: Array
		},
		/**
		 * 焦点离开 促发事件
		 */
		isBlur: {
			type: Boolean,
			default: false
		},
		colon: {
			type: Boolean,
			default: true
		},
		// 日期选择器开始时间
		dateStart: {
			type: String,
			default: '1970-01-01',
		},
		justifyContent: {
			type: String,
			default: 'flex-start',
		},
		textAlign: {
			type: String,
			default: 'left',
		},
		// 最大输入长度
		maxlength: {
			type: [String, Number],
			default: 1000
		},
		format: {
			type: String,
			default: 'YYYY-MM-DD'
		},
		fieldName: {
			type: String,
			default: ''
		},
		itemIndex: {
			type: Number,
			default: 0
		},
	},
	model: {
		prop: 'value',
		event: 'input'
	},
	data() {
		return {
			/**
			 * 显示密码明文
			 */
			showPassword: false,
			inputValue: this.value,
			/**
			 * 是否获取焦点
			 */
			isFocus: false,
			/*控制限制*/
			show: true,
			localIsBlur: this.isBlur,
			c_focus: false,
			c_click: false,
		}
	},
	computed: {
		inputType() {
			const type = this.type
			return type === 'password' ? 'text' : type
		},
		keyWithValue() {
			if (this.range.length > 0) {
				const text = this.range.length > 0 ? this.range.find(item => item.value == this.value)?.text : '请选择'
				return text || ''
			}

		},
		// codeWithName() {
		// 	let list = [];
		// 	this.value.split(',').map(item => {
		// 		list.push("[" + item + "]" + this.getName(this.name, item) || '');
		// 	})
		// 	return list.join(',');
		// }
	},
	methods: {

		clear() {
			this.$emit('input', '')
		},
		display() {
			this.showPassword = !this.showPassword
		},
		onFocus() {
			this.isFocus = true;
			this.$emit('focus', '')
		},
		onBlur(e) {
			this.$nextTick(() => {
				this.isFocus = false;
				this.c_focus = false;
			})
			if (this.localIsBlur) {
				this.onConfirm(e);
			}
		},
		onInput(e) {
            this.$emit('input', e.detail.value)
		},
		onConfirm(e) {
			if (e) {
				const oldValue = this.inputValue; // 获取旧值  
				this.inputValue = e.target?.value; // 更新 input 的值  
				this.localIsBlur = false;
				if (this.type == 'number' || this.type == 'digit') {
					this.$emit('confirm', { type: this.type, fieldName: this.fieldName, oldValue: Number(oldValue), newValue: Number(e?.target?.value) || 0, itemIndex: this.itemIndex })
				} else {
					this.$emit('confirm', { type: this.type, fieldName: this.fieldName, oldValue: oldValue, newValue: e?.target?.value, itemIndex: this.itemIndex })
				}
				setTimeout(() => {
					this.localIsBlur = this.isBlur;
				}, 1000);
			}

		},
		onClick(e) {
			this.$emit('clickRight', this.type)
		},
		onClickScan() {
			this.$emit('clickRightScan', this.type)
		},
		onDateChange(e) {
			this.$emit('input', e.detail.value,this.itemIndex)
		},
		onSelectorChange(e) {
			const value = this.range[e.detail.value].value;
			this.$emit('input', value)
		},
		checkboxChange: function (e) {
			var items = this.range,
				values = e.detail.value;
			for (var i = 0, lenI = items.length; i < lenI; ++i) {
				const item = items[i]
				if (values.indexOf(item.value) >= 0) {
					this.$set(item, 'checked', true)
				} else {
					this.$set(item, 'checked', false)
				}
			}
			this.$emit('input',
				this.range.filter(item => item.checked === true)
					.map(item => item.value)
					.join(',')
			)
		},
		radioChange: function (e) {
			var items = this.range
			for (let i = 0; i < items.length; i++) {
				if (items[i].value === e.detail.value) {
					this.$set(items, 'checked', true)
					this.$emit('input', e.detail.value)
					break;
				}
			}
		},
		getFocus(e) {
			this.c_focus = true;
		},
		getClick() {
			this.c_click = true;
		},
		formatDate(date) {
			if (date) {
				return dayjs(date).format(this.format)
			}
			return '';
		},
		// getName(key, value) {
		// 	return getRelatedName(key, value) || '';
		// },
	}
}
</script>

<style lang="scss" scoped>
@import '@/static/font/enjoyicon/iconfont.css';

.m-card-input-view {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	/* width: 100%; */
	flex: 1;
	padding: $uni-spacing-col-lg*0.6 0;
	border-bottom: 1px solid $uni-border-color;
	display: flex;
	font-size: $uni-font-size-base;
}

.m-card-input-view:last-of-type {
	border-bottom: 0;
}

.m-card-input-title {
	width: auto;
	color: #999;
	;
}

.m-card-input-content {
	flex: 1;
	padding: 0 5px 0 5px;
	width: 70%;
	max-height: 60px;
}

// .m-card-input-content16{
// 	width: 65%;
// }

.m-card-input-right {
	width: 12%;
	text-align: right;
}

.m-input-input-left {
	width: 12%;
	text-align: left;
}

.m-card-arrow {
	color: $uni-text-color-disable !important;
}

.m-card-arrowright {
	margin-left: 10rpx;
}

.m-input-input {
	flex: 1;
	width: 100%;
	height: 20px;
	font-size: $uni-font-size-base;
	line-height: 1.6;
	background-color: rgba(0, 0, 0, 0);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.m-input-input-date {
	//文字居左
	text-align: left;
}
.m-input-icon {
	width: 20px;
	font-size: 20px;
	line-height: 20px;
	color: #666666;
}

.scroll-view-item {}

.m-card-input-text {
	display: inline-flex;
	padding: 0;
	margin: 0;
	width: 50%;
	padding-right: 10rpx;
}

.m-input-date {
	display: flex;
}


.mr-5 {
	margin-right: 5px;
}

// 多选样式调整
.rds-multiselect {
	display: flex;

	label {
		display: inline-flex;
		padding: 0;
		margin: 0;
		width: auto;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;

		checkbox {
			display: inline-block;
		}

		.text {
			padding: 0.3em 0 0 0;
		}
	}
}

// input.displayable 
.displayable {
	border: none !important;
}

.isFocus {
	background-color: #FDFFC2E0 !important;
	color: #000000 !important;
}
</style>
